<template>
    <div>
        <h2>用户</h2>
        <table border=1> 
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="(user,index) in users" :key="index">
                <td>{{ user.id }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.age }}</td>
                <td><a href="javascript:;" @click="delUser(user.id)">删除</a> <a :href="'#/user/update?id='+user.id">编辑</a></td>
            </tr>
            
        </table>
        <a href="#/user/add">添加用户</a>
        <router-view/>
    </div>
</template>

<script>
export default {
    data(){
        return{
            users: []
        }
    },
    methods: {
        findAll(){
            this.$http.get('http://localhost:8989/vue/user/findAll?page=1&rows=2').then(res=>{
                console.log(res);
                if(res.data.code === 200){
                    this.users = res.data.data.results
                }
                
            })
        },
        delUser(value){
            console.log('用户id '+value);
            this.$http.get('http://localhost:8989/vue/user/delUser?id='+value).then(res=>{
                if(res.data.code === 200){
                    this.findAll();
                }
            })
            //this.users = [];
        }
    },
    created(){
        this.findAll();
    },
    watch: {
        $route: {
            handler: function(val, oldVal){
                console.log(val);
                this.findAll();
            },
            // 深度观察监听
            deep: true
        }
    },
}
</script>